<template>
    <Card>
      <div class="search-con">
        <div>
          <label class="search-lable">用户名称:</label>
          <Input class="search-col" v-model="from.name"/>
        </div>
        <Button type="success" @click="onSearch">查询</Button>
        <Button type="primary" @click="editPage('')" class="marL5" >新增</Button>
      </div>
      <tables @onPageChange="onPageChange" @onPageSizeChange="onPageSizeChange" :page="from.page" ref="user_tables" v-model="tableData" :columns="columns" />
      <Modal width="1000px"
        :title="modalTitle"
        v-model="model"
        :footer-hide="footerHide"
        @on-visible-change="visibleChange"
        class-name="vertical-center-modal" >
        <userEdit ref="userEdit" @onCloneModal="modelState" ></userEdit>
      </Modal>
    </Card>
</template>

<script>
import './user.less'
import '@/assets/css/basic.less'
import { userListREQ, deleteUserREQ } from '@/api/user'
import tables from '_c/tables'
import userEdit from '@/view/basic/user/components/edit'
export default {
  name: 'basic_user',
  components: {
    userEdit,
    tables
  },
  data () {
    return {
      modalTitle: '编辑',
      footerHide: true,
      model: false,
      tableData: [],
      columns: [
        { type: 'selection', key: 'id', width: 60, align: 'center' },
        { title: '用户名', key: 'name' },
        { title: '帐号', key: 'userName' },
        { title: '联系电话', key: 'telephone' },
        { title: '用户状态', key: 'statusText' },
        { title: '性别', key: 'sexText' },
        { title: '用户类型', key: 'typeText' },
        { title: '操作',
          key: 'id',
          render: (h, params) => {
            return [
              h('Button', {
                attrs: {
                  type: 'success'
                },
                domProps: {
                  innerHTML: '修改'
                },
                on: {
                  click: (event) => {
                    this.editPage(params.row.id)
                  }
                }
              }),
              h('Poptip', {
                props: {
                  confirm: true,
                  title: '你确定要删除吗?'
                },
                on: {
                  'on-ok': () => {
                    deleteUserREQ(params.row.id).then(res => {
                      this.from.page.size = 1
                      this.onSearch()
                    })
                  }
                }
              }, [
                h('Button', {
                  attrs: {
                    type: 'error'
                  },
                  domProps: {
                    innerHTML: '删除'
                  },
                  'class': ['marL5']
                })
              ]
              )
            ]
          }
        }
      ],
      from: {
        name: '',
        page: {
          size: 1,
          number: 10
        }
      }
    }
  },
  methods: {
    onSearch () {
      const { name } = this.from
      const { size, number } = this.from.page
      userListREQ({ name, size, number }).then((res) => {
        if (res) {
          const { pageSize, pageNum, totalPages, content } = res
          this.from.page = Object.assign(this.from.page, { pageSize, pageNum, totalPages })
          this.tableData = content
        }
      })
    },
    onPageChange (size) {
      this.from.page.size = size
      this.onSearch()
    },
    onPageSizeChange (number) {
      this.from.page.number = number
      this.onSearch()
    },
    editPage (_id = '') {
      this.modelState(true)
      this.$refs.userEdit.loadPage(_id)
    },
    modelState (state = false) {
      this.model = state
    },
    visibleChange (visible) {
      if (!visible) this.onSearch()
    }
  },
  mounted () {
    this.onSearch()
  }
}
</script>

<style>
</style>
